<template>
  <d2-container>
    <el-card shadow="never" class="d2-mb">
      <el-form class="filter-container" ref="egForm" :model="egForm" label-width="80px">
          <el-row :gutter="20">
            <el-col :span="4">
              <el-form-item label="策略名称">
                 <el-input
                   placeholder="请输入内容"
                   v-model="input"
                   clearable>
                 </el-input>
              </el-form-item>
            </el-col>
             <el-col :span="4">
              <el-form-item label="策略名称">
                 <el-input
                   placeholder="请输入内容"
                   v-model="input"
                   clearable>
                 </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="4">
                <el-form-item label="考核主体">
                   <el-select v-model="value" placeholder="请选择">
                     <el-option
                       v-for="item in options1"
                       :key="item.value"
                       :label="item.label"
                       :value="item.value">
                     </el-option>
                   </el-select>
                </el-form-item>
            </el-col>
            <el-col :span="4">
                <el-form-item label="考核主体">
                   <el-select v-model="value" placeholder="请选择">
                     <el-option
                       v-for="item in options1"
                       :key="item.value"
                       :label="item.label"
                       :value="item.value">
                     </el-option>
                   </el-select>
                </el-form-item>
            </el-col>
             <el-col :span="6">
                 <el-form-item label="查询日期">
                <el-col :span="11">
                  <el-date-picker type="date" placeholder="选择日期" value-format="yyyy-MM-dd" style="width: 100%;"></el-date-picker>
                </el-col>
                <el-col class="line tc" :span="2">~</el-col>
                <el-col :span="11">
                  <el-date-picker type="date" placeholder="选择日期" value-format="yyyy-MM-dd" style="width: 100%;"></el-date-picker>
                </el-col>
              </el-form-item>
            </el-col>
            <el-col :span="2" style='margin-top:4px;'>
              <el-button type="primary" size="mini">
                <d2-icon name="search"/> 查询
              </el-button>
            </el-col>
            <el-col :span="4">
              <el-form-item label="策略名称">
                 <el-input
                   placeholder="请输入内容"
                   v-model="input"
                   clearable>
                 </el-input>
              </el-form-item>
            </el-col>
             <el-col :span="4">
              <el-form-item label="策略名称">
                 <el-input
                   placeholder="请输入内容"
                   v-model="input"
                   clearable>
                 </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="4">
                <el-form-item label="考核主体">
                   <el-select v-model="value" placeholder="请选择">
                     <el-option
                       v-for="item in options1"
                       :key="item.value"
                       :label="item.label"
                       :value="item.value">
                     </el-option>
                   </el-select>
                </el-form-item>
            </el-col>
            <el-col :span="4">
                <el-form-item label="考核主体">
                   <el-select v-model="value" placeholder="请选择">
                     <el-option
                       v-for="item in options1"
                       :key="item.value"
                       :label="item.label"
                       :value="item.value">
                     </el-option>
                   </el-select>
                </el-form-item>
            </el-col>
             <el-col :span="6">
                 <el-form-item label="查询日期">
                <el-col :span="11">
                  <el-date-picker type="date" placeholder="选择日期" value-format="yyyy-MM-dd" style="width: 100%;"></el-date-picker>
                </el-col>
                <el-col class="line tc" :span="2">~</el-col>
                <el-col :span="11">
                  <el-date-picker type="date" placeholder="选择日期" value-format="yyyy-MM-dd" style="width: 100%;"></el-date-picker>
                </el-col>
              </el-form-item>
            </el-col>
          </el-row>
      </el-form>
    </el-card>
    <el-upload :before-upload="handleUpload" action="default" class='mb'>
       <el-button type="default" size="mini">
          <d2-icon name="plus"/>
          新增
        </el-button>
        <el-button type="default" size="mini">
          <d2-icon name="edit"/>
          修改
        </el-button>
        <el-button type="default" size="mini" icon="el-icon-delete">
          删除
        </el-button>
         <el-button type="default" size="mini">
          <d2-icon name="search"/>
          查看
        </el-button>
        <el-button type="default" size="mini">
          <d2-icon name="download"/>
          导入
        </el-button>
        <el-button type="default" size="mini" @click="exportExcel">
          <d2-icon name="upload"/>
          导出
      </el-button>
      <el-button type="default" size="mini" @click="handleFormSubmit">
         <d2-icon name="cog"/>
         全部已读
      </el-button>
      <el-button type="default" size="mini" @click="handleCleanCacheAndRefreshCurrent">
        <d2-icon name="refresh"/>
        刷新
      </el-button>
    </el-upload>
    <el-card shadow="never" class="d2-mb">
     <template slot="header">1.普通表格-单选</template>
      <d2-crud
      :columns="columns2"
      :data="data2"
      :options="options2"
      index-row
      @current-change="handleCurrentChange"/>
    </el-card>
     <el-card shadow="never" class="d2-mb">
     <template slot="header">2.普通表格-多选</template>
      <d2-crud
      :columns="columns2"
      :data="data2"
      :options="options"
      selection-row
      @selection-change="handleSelectionChange"/>
    </el-card>
     <el-card shadow="never" class="d2-mb">
     <template slot="header">3.可行内修改表格</template>
      <d2-crud
      :columns="columns"
      :data="data"
      :options="options"
      @cell-data-change="handleCellDataChange"/>
    </el-card>
     <el-card shadow="never" class="d2-mb" style='min-height:700px;'>
      <template slot="header">4.echarts图表-K线图</template>
       <div class="inner" style='top:1400px;min-height:600px;'>
         <ve-candle :data="chartData" v-bind="pubSetting"></ve-candle>
       </div>
    </el-card>
     <el-card shadow="never" class="d2-mb" style='min-height:700px;'>
      <template slot="header">5.echarts图表-折线图</template>
        <div class="inner" style='top:2100px;min-height:600px;'>
      <ve-line :data="chartData1" :extend="extend" v-bind="pubSetting"></ve-line>
    </div>
    </el-card>
     <el-card shadow="never" class="d2-mb" style='min-height:1000px;'>
      <template slot="header">6.echarts图表-饼状图</template>
        <div class="inner" style='top:2800px;min-height:400px;'>
          <ve-pie :data="chartData2" :settings="chartSettings" v-bind="pubSetting"></ve-pie>
        </div>
         <div class="inner" style='top:3200px;min-height:400px;'>
          <ve-pie :data="chartData2" :settings="chartSettings1" v-bind="pubSetting"></ve-pie>
        </div>
    </el-card>
     <el-card shadow="never" class="d2-mb">
      <template slot="header">7.流程图</template>
      <el-steps :space="200" :active="1" finish-status="success">
        <el-step title="已完成" description="发起" icon="el-icon-edit"></el-step>
        <el-step title="进行中" description="策略审批" icon="el-icon-upload"></el-step>
        <el-step title="步骤 3" description="完成审批回调" icon="el-icon-picture"></el-step>
        <el-step title="步骤 3" description="已完成" icon="el-icon-edit"></el-step>
      </el-steps>
    </el-card>
  </d2-container>
</template>

<script>
export default {
  // mixins: [
  //   list
  // ],
  data () {
    this.chartSettings = {
      roseType: 'radius'
    }
    this.chartSettings1 = {
      radius: 150,
      offsetY: 250
    }
    return {
      egForm: {},
      columns: [
        {
          title: '日期',
          key: 'date',
          component: {
            name: 'el-date-picker',
            size: 'mini'
          },
          sortable: true
        },
        {
          title: '姓名',
          key: 'name',
          component: {
            name: 'el-select',
            options: [
              {
                value: '王小虎',
                label: '王小虎'
              },
              {
                value: '王中虎',
                label: '王中虎'
              },
              {
                value: '王老虎',
                label: '王老虎'
              }
            ],
            size: 'mini'
          },
          sortable: true
        },
        {
          title: '年龄',
          key: 'age',
          component: {
            name: 'el-select',
            options: [
              {
                value: '16',
                label: '16'
              },
              {
                value: '26',
                label: '26'
              },
              {
                value: '36',
                label: '36'
              }
            ],
            size: 'mini'
          },
          sortable: true
        },
        {
          title: '地址',
          key: 'address',
          component: {
            name: 'el-input',
            size: 'mini'
          },
          sortable: true
        }
      ],
      data: [
        {
          date: '2016-05-02',
          name: '王小虎',
          age: '16',
          address: '上海市普陀区金沙江路 1518 弄'
        },
        {
          date: '2016-05-04',
          name: '王小虎',
          age: '16',
          address: '上海市普陀区金沙江路 1517 弄'
        },
        {
          date: '2016-05-01',
          name: '王小虎',
          age: '16',
          address: '上海市普陀区金沙江路 1519 弄'
        },
        {
          date: '2016-05-03',
          name: '王小虎',
          age: '16',
          address: '上海市普陀区金沙江路 1516 弄'
        }
      ],
      columns2: [
        {
          title: '日期',
          key: 'date',
          width: '180',
          sortable: true
        },
        {
          title: '姓名',
          key: 'name',
          width: '180',
          sortable: true
        },
        {
          title: '地址',
          key: 'address',
          sortable: true
        }
      ],
      data2: [
        {
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        },
        {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 弄'
        },
        {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄'
        },
        {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄'
        }
      ],
      options: {
        border: true
        //  defaultSort: {
        //   prop: 'date',
        //   order: 'descending'
        // }
      },
      options2: {
        border: true,
        highlightCurrentRow: true
      },
      options1: [
        {
          value: '选项1',
          label: '黄金糕'
        }, {
          value: '选项2',
          label: '双皮奶'
        }, {
          value: '选项3',
          label: '蚵仔煎'
        }, {
          value: '选项4',
          label: '龙须面'
        }, {
          value: '选项5',
          label: '北京烤鸭'
        }
      ],
      value: '',
      // K线图
      pubSetting: {
        height: '100%'
      },
      chartData: {
        columns: ['日期', 'open', 'close', 'lowest', 'highest', 'vol'],
        rows: [
          { 日期: '2004-01-05', open: 10411.85, close: 10544.07, lowest: 10411.85, highest: 10575.92, vol: 221290000 },
          { 日期: '2004-01-06', open: 10543.85, close: 10538.66, lowest: 10454.37, highest: 10584.07, vol: 191460000 },
          { 日期: '2004-01-07', open: 10535.46, close: 10529.03, lowest: 10432.12, highest: 10587.55, vol: 225490000 },
          { 日期: '2004-01-08', open: 10530.07, close: 10592.44, lowest: 10480.59, highest: 10651.99, vol: 237770000 },
          { 日期: '2004-01-09', open: 10589.25, close: 10458.89, lowest: 10420.52, highest: 10603.48, vol: 223250000 },
          { 日期: '2004-01-12', open: 10461.55, close: 10485.18, lowest: 10389.85, highest: 10543.03, vol: 197960000 },
          { 日期: '2004-01-13', open: 10485.18, close: 10427.18, lowest: 10341.19, highest: 10539.25, vol: 197310000 },
          { 日期: '2004-01-14', open: 10428.67, close: 10538.37, lowest: 10426.89, highest: 10573.85, vol: 186280000 },
          { 日期: '2004-01-15', open: 10534.52, close: 10553.85, lowest: 10454.52, highest: 10639.03, vol: 260090000 },
          { 日期: '2004-01-16', open: 10556.37, close: 10600.51, lowest: 10503.71, highest: 10666.88, vol: 254170000 },
          { 日期: '2004-01-20', open: 10601.42, close: 10528.66, lowest: 10447.92, highest: 10676.96, vol: 224300000 },
          { 日期: '2004-01-21', open: 10522.77, close: 10623.62, lowest: 10453.11, highest: 10665.72, vol: 214920000 },
          { 日期: '2004-01-22', open: 10624.22, close: 10623.18, lowest: 10545.03, highest: 10717.41, vol: 219720000 },
          { 日期: '2004-01-23', open: 10625.25, close: 10568.29, lowest: 10490.14, highest: 10691.77, vol: 234260000 },
          { 日期: '2004-01-26', open: 10568.12, close: 10702.51, lowest: 10510.44, highest: 10725.18, vol: 186170000 },
          { 日期: '2004-01-27', open: 10701.11, close: 10609.92, lowest: 10579.33, highest: 10748.81, vol: 206560000 },
          { 日期: '2004-01-28', open: 10610.07, close: 10468.37, lowest: 10412.44, highest: 10703.25, vol: 247660000 },
          { 日期: '2004-01-29', open: 10467.41, close: 10510.29, lowest: 10369.92, highest: 10611.56, vol: 273970000 },
          { 日期: '2004-01-30', open: 10510.22, close: 10488.07, lowest: 10385.56, highest: 10551.03, vol: 208990000 },
          { 日期: '2004-02-02', open: 10487.78, close: 10499.18, lowest: 10395.55, highest: 10614.44, vol: 224800000 },
          { 日期: '2004-02-03', open: 10499.48, close: 10505.18, lowest: 10414.15, highest: 10571.48, vol: 183810000 },
          { 日期: '2004-02-04', open: 10503.11, close: 10470.74, lowest: 10394.81, highest: 10567.85, vol: 227760000 },
          { 日期: '2004-02-05', open: 10469.33, close: 10495.55, lowest: 10399.92, highest: 10566.37, vol: 187810000 },
          { 日期: '2004-02-06', open: 10494.89, close: 10593.03, lowest: 10433.74, highest: 10634.81, vol: 182880000 },
          { 日期: '2004-02-09', open: 10592.41, close: 10579.03, lowest: 10433.72, highest: 10634.81, vol: 160720000 },
          { 日期: '2004-02-10', open: 10578.74, close: 10613.85, lowest: 10511.18, highest: 10667.03, vol: 160590000 },
          { 日期: '2004-02-11', open: 10605.48, close: 10737.72, lowest: 10561.55, highest: 10779.41, vol: 277850000 },
          { 日期: '2004-02-12', open: 10735.18, close: 10694.07, lowest: 10636.44, highest: 10775.03, vol: 197560000 },
          { 日期: '2004-02-13', open: 10696.22, close: 10627.85, lowest: 10578.66, highest: 10755.47, vol: 208340000 },
          { 日期: '2004-02-17', open: 10628.88, close: 10714.88, lowest: 10628.88, highest: 10762.07, vol: 169730000 },
          { 日期: '2004-02-18', open: 10706.68, close: 10671.99, lowest: 10623.62, highest: 10764.36, vol: 164370000 },
          { 日期: '2004-02-19', open: 10674.59, close: 10664.73, lowest: 10626.44, highest: 10794.95, vol: 219890000 },
          { 日期: '2004-02-20', open: 10666.29, close: 10619.03, lowest: 10559.11, highest: 10722.77, vol: 220560000 },
          { 日期: '2004-02-23', open: 10619.55, close: 10609.62, lowest: 10508.89, highest: 10711.84, vol: 229950000 },
          { 日期: '2004-02-24', open: 10609.55, close: 10566.37, lowest: 10479.33, highest: 10681.41, vol: 225670000 },
          { 日期: '2004-02-25', open: 10566.59, close: 10601.62, lowest: 10509.42, highest: 10660.73, vol: 192420000 },
          { 日期: '2004-02-26', open: 10598.14, close: 10580.14, lowest: 10493.71, highest: 10652.96, vol: 223230000 },
          { 日期: '2004-02-27', open: 10581.55, close: 10583.92, lowest: 10519.03, highest: 10689.55, vol: 200050000 }
        ]
      },
      // 折线图
      extend: {
        series: {
          label: {
            normal: {
              show: true
            }
          }
        }
      },
      chartData1: {
        columns: ['日期', '访问用户', '下单用户', '下单率'],
        rows: [
          { 日期: '1/1', 访问用户: 1393, 下单用户: 1093, 下单率: 0.32 },
          { 日期: '1/2', 访问用户: 3530, 下单用户: 3230, 下单率: 0.26 },
          { 日期: '1/3', 访问用户: 2923, 下单用户: 2623, 下单率: 0.76 },
          { 日期: '1/4', 访问用户: 1723, 下单用户: 1423, 下单率: 0.49 },
          { 日期: '1/5', 访问用户: 3792, 下单用户: 3492, 下单率: 0.323 },
          { 日期: '1/6', 访问用户: 4593, 下单用户: 4293, 下单率: 0.78 }
        ]
      },
      chartData2: {
        columns: ['日期', '访问用户'],
        rows: [
          { 日期: '1/1', 访问用户: 1393 },
          { 日期: '1/2', 访问用户: 3530 },
          { 日期: '1/3', 访问用户: 2923 },
          { 日期: '1/4', 访问用户: 1723 },
          { 日期: '1/5', 访问用户: 3792 },
          { 日期: '1/6', 访问用户: 4593 }
        ]
      }
    }
  },
  methods: {
    // 行内编辑
    handleCellDataChange ({ rowIndex, key, value, row }) {
      console.log(rowIndex)
      console.log(key)
      console.log(value)
      console.log(row)
    },
    handleUpload (file) {
      this.$import.xlsx(file)
        .then(({ header, results }) => {
          this.table.columns = header.map(e => {
            return {
              label: e,
              prop: e
            }
          })
          this.table.data = results
        })
      return false
    },
    // 单选
    handleCurrentChange (currentRow, oldCurrentRow) {
      console.log(currentRow)
      console.log(oldCurrentRow)
    },
    // 多选
    handleSelectionChange (selection) {
      console.log(selection)
    },
    // 清空当前页缓存并刷新此页面
    async handleCleanCacheAndRefreshCurrent () {
      this.keepAliveRemove(this.$route.name)
      await this.$nextTick()
      this.$router.replace('/refresh')
    }
  }
}
</script>
